<template>
  <view style="width: 100%; height: 100%; padding: 30upx 20upx;">
    <view v-html="free_html || ''" v-if="free_html"></view>
    <view id="contentHtml" class="flex" style="width: 100%; position: relative;">
      <view v-if="text_tutorial.is_buy == 1" style="width: 100%; overflow: hidden;" :style="text_tutorial.is_buy == 1 ? '': 'height: 300upx'" v-html="secret_html || ''">
      </view>
      <view v-if="secret_html && !text_tutorial.is_buy" @click="handleToPay(text_tutorial.product && text_tutorial.product.pay_type, text_tutorial.product && text_tutorial.product.sale_price, text_tutorial.product && text_tutorial.product.id, text_tutorial.product && text_tutorial.product.article_id)" class="flex flex-direction align-center justify-center"
            style="width: 100%; height: 126upx; background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));">
        <image src="/static/icon/detail/lock@2x.png" style="width: 32upx; height: 32upx;margin-bottom: 20upx;"></image>
        <view style="font-size: 24upx; color: #6A6A6A;">查看需要付费</view>
      </view>
    </view>
    <!--支付框-->
    <view class="cu-modal bottom-modal" :class="pay_flag?'show':''" @click="pay_flag = false"
          @touchmove.stop.prevent="">
      <view class="cu-dialog" style="background-color: white; border-radius: 10upx 10upx 0 0;" @click.stop="">
        <view class="cu-bar justify-end" style="margin-bottom: 8%;">
          <view class="content" style="font-weight: bold; color: #333333; font-size: 26upx;">选择支付方式</view>
        </view>
        <view class="flex" style="padding: 0 40upx;">
          <radio-group style="width: 100%;" @change="handleChangeRadioChange">
            <view v-for="(item, index) in pay_type_list" style="margin-bottom: 8%;">
              <view class="flex justify-between align-center" style="width: 100%; margin-bottom: 32upx;">
                <view class="flex">
                  <image :src="item.img" style="width: 44upx; height: 44upx; margin-right: 10upx;"></image>
                  <view style="font-size: 26upx; color: #333333;">{{ item.name }}</view>
                </view>
                <radio class='radio' :value="index" :checked="pay_type == index"/>
              </view>
            </view>
          </radio-group>
        </view>
        <view class="flex justify-center align-center"
              @click="handleToNormalPay(text_tutorial.product && text_tutorial.product.pay_type, text_tutorial.product && text_tutorial.product.article_id, text_tutorial.product && text_tutorial.product.sale_price, text_tutorial.product && text_tutorial.product.id)"
              style="height: 98upx; background-color: #E52718; font-size: 28upx; color: white;">
          立即支付 <span style="font-size: 20upx;">（合计：¥{{text_tutorial.product && text_tutorial.product.sale_price}}）</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {orders_freeOrPasswordPay, orders_payOrder, pay_aliPayOrders} from "api/pay/pay";
import {imgTextTutorial_getById} from "api/article/article"

export default {
  data() {
    return {
      img_text_tutorial_id: '', //图文id
      free_html: '', //
      secret_html: '',
      content_html_width: 0, //富文本图片宽度
      pay_flag: false, //支付框
      pay_type: 0, //支付类型
      text_tutorial: {}, //图文数据
      pay_type_list: [
        {
          name: '微信支付',
          img: '/static/icon/detail/weixin@2x.png'
        },
        {
          name: '支付宝支付',
          img: '/static/icon/detail/zhifubao@2x.png'
        },
        {
          name: '密码支付',
          img: '/static/icon/detail/mima@2x.png'
        }
      ], //支付方式列表
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#contentHtml').boundingClientRect(data => {
      this.content_html_width = data.width - 22;
    }).exec();
  },
  methods: {
    pageInit(img_text_tutorial_id){
      imgTextTutorial_getById({img_text_tutorial_id}).then(res=>{
        if (res.data && res.data.free_html) {
          this.free_html = res.data.free_html.replace(new RegExp(' style="" ', "g"), '');
          this.free_html = res.data.free_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if (res.data && res.data.secret_html) {
          this.secret_html = res.data.secret_html.replace(new RegExp(' style="" ', "g"), '');
          this.secret_html = res.data.secret_html.replace(/\<img/gi, '<img style="width:100%;height:auto; display: block;"');
        }
        if(res.data && res.data.product && res.data.product.pay_type !== 'normal_password_pay'){
          this.pay_type_list = this.pay_type_list.slice(0,2);
        }
        this.text_tutorial = res.data;
      })
    },
    //去支付
    handleToPay(pay_type, fee, product_id, article_id){
      let data = {
        f_table: 'product',
        f_id: product_id,
        fee: fee,
        pay_type: pay_type,
        article_id: article_id
      }
      switch (pay_type) {
        case 'password_pay':
          let password_pay_data = JSON.stringify(data)
          this.$uniNavigateTo({
            url: '/pages/passBand/passwordPayment/passwordPayment',
            query: {
              data: password_pay_data
            }
          })
          break;
        case 'free_pay':
          orders_freeOrPasswordPay(data).then(res => {
            this.text_tutorial.is_buy = 1;
            uni.redirectTo({
              url: `/pages/passBand/paymentSuccessful/paymentSuccessful?fee=${fee}`
            })
          }).catch(err=>{
            console.log(err)
          })
          break;
        case 'normal_pay':
        case 'normal_password_pay':
          this.pay_flag = true;
          break;
      }
    },
    //选择支付方式
    handleChangeRadioChange(e) {
      this.pay_type = e.target.value;
    },
    handleToNormalPay(pay_type, article_id, fee, product_id){
      let data = {
        f_table: 'product',
        f_id: product_id,
        fee: fee,
        article_id: article_id,
        pay_type: 'password_pay'
      }
      let user_id = uni.getStorageSync('user_info').id
      switch (this.pay_type) {
        case 0:
          plus.runtime.openURL(`${this.$cbdh5url}pay?f_table=product&f_id=${product_id}&fee=${fee}&article_id=${article_id}&user_id=${user_id}`);
          // orders_payOrder(data).then(res=>{
          //   uni.requestPayment({
          //     provider: 'wxpay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       this.pageInit(this.img_text_tutorial_id);
          //       this.pay_flag = false;
          //       console.log('success:' + JSON.stringify(res));
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //     },
          //     fail: (err)=> {
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err =>{
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
        case 1:
          plus.runtime.openURL( `${this.$cbdh5url}pay?f_table=product&f_id=${product_id}&fee=${fee}&article_id=${article_id}&user_id=${user_id}&type=1`);
          // pay_aliPayOrders(data).then(res=>{
          //   uni.requestPayment({
          //     provider: 'alipay',
          //     orderInfo: res.data, //微信、支付宝订单数据
          //     success: (res)=> {
          //       this.pageInit(this.img_text_tutorial_id);
          //       this.pay_flag = false;
          //       console.log('success:' + JSON.stringify(res));
          //       uni.showToast({
          //         title: '支付成功',
          //         icon: 'none'
          //       })
          //     },
          //     fail: (err)=> {
          //       uni.showToast({
          //         title: '您取消了支付',
          //         icon: 'none'
          //       })
          //       this.pay_flag = false;
          //       console.log('fail:' + JSON.stringify(err));
          //     }
          //   });
          // }).catch(err=>{
          //   uni.showToast({
          //     title: err.msg,
          //     icon: 'none'
          //   })
          // })
          break;
        case 2:
          let password_pay_data = JSON.stringify(data)
          this.pay_flag = false;
          this.$uniNavigateTo({
            url: '/pages/passBand/passwordPayment/passwordPayment',
            query: {
              data: password_pay_data
            }
          })
          break;
      }
    }
  },
  //导航栏左侧按钮
  onBackPress() {
    if (this.pay_flag) {
      this.pay_flag = false;
      return true
    }
  },
  onShow() {
    let page = getCurrentPages();//获取应用页面栈
    let currentPage = page[page.length - 1];//获取当前页面信息
    this.img_text_tutorial_id = currentPage.options.img_text_tutorial_id;
    this.pageInit(currentPage.options.img_text_tutorial_id)
  }
}
</script>

<style lang="less" scoped>
/deep/ .uni-radio-input-checked {
  border-color: #E52718 !important;
}

/deep/ uni-radio .uni-radio-input {
  width: 34upx;
  height: 34upx;
  background-color: #ffffff !important;
}

/deep/ uni-radio .uni-radio-input::after {
  background-color: #E52718 !important;
  border: 6upx solid #E52718 !important;
  border-color: #E52718 !important;
  left: -1 !important;
}
</style>
